<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>我的信息</title>
		<style type="text/css">
			body {
				background-color: #FFFFFF;
			}
			
			.aaaa {
				margin: 0em;
				padding: 0em;
				width: 100%;
			}
			
			.herd {
				border: 1px solid #FFFFFF;
				width: 100%;
				height: 10em;
				background: linear-gradient(to right, #5fd6fc, #5ef0c0);
				border-radius: 0.5em;
			}
			
			h2 {
				color: #FFFFFF;
				text-align: center;
			}
			
			h5 {
				color: #FFFFFF;
				text-align: center;
			}
			
			.aa {
				margin: 0em;
				padding: 0em;
				width: 100%;
			}
			
			.message {
				position: relative;
				margin-top: 1em;
				border: 1px solid #F5F5F5;
				height: 10em;
				border-radius: 0.5em;
				box-shadow: 0.1em 0.1em 2em 0.1em rgb(198, 224, 228);
			}
			
			.iput {
				margin-top: 2em;
				margin-left: 4.5em;
				font-size: 1.2em;
			}
			
			.imgs {
				position: absolute;
				left: 0.2em;
				top: 2.2em;
			}
			
			.Input1 {
				border-style: none;
				font-size: 20px;
				margin-left: 1em;
				margin-top: -1.3em;
				width: 6em;
			}
			
			span {
				font-size: 20px;
				margin-left: -3em;
			}
			.iput2{
				border-bottom: 1px solid #F7ECB5;
				margin-top: 0.5em;
				margin-left: -4em;
				width: 17.5em;
			}
			.imgs1 {
				position: absolute;
				left: 0.2em;
				top: 6em;
			}
			.huo{
				border: 1px solid #FFFFFF;
				text-align: center;
				margin-top: -3em;
				margin-left:9em;
				height: 3em;
			}
			.a1{
				position: absolute;
				top:8.5em;
			left: 50m;
			font-size: 0.7em;
			}
			.afhsy{
		color: white;
		display: block;
		width: 100%;
		height: 4em;
		line-height: 4em;
		text-decoration: none;
		text-align: center;
		font-size: 1em;
	}
	.aad{
		position: absolute;
	     top: 30em;
	     left:0em;
		width: 100%;
		background: rgb(109,188,247);
	}
	.error{
		position: relative;
		top:2em;
		left: 0em;
		color: red;
		
	}
		</style>
	</head>

	<body>
		<div class="container-fluid aaaa">
			<div class="col-xs-4 herd">
				<h2>我的信息</h2>
				<h5>绑定您的爱车，让理赔服务更便捷方便</h5>
			</div>
			<form action="login_in" id="form001" method="post">
			<input type="hidden" class="hiddenno" name="hiddenno" value=""/>
			<div class="container-fluid aa">
				<div class="col-xs-10 message">
					<div class="col-xs-10 iput">
						<img src="../statics/img/whd_img/手机号.png" width="19em" class="imgs" />
						<span>		手机号 &nbsp;&nbsp;&nbsp;</span>
						<input type="text" class="form-control Input1"  required placeholder="请输入手机号" pattern="^1[34578][0-9]{9}$"  name="phone" id="input01">
						<div class="iput2"></div>
					</div>
						<div class="col-xs-10 iput">
						<img src="../statics/img/whd_img/验证码.png" width="22em" class="imgs1" />
						<span>		验证码&nbsp;&nbsp;&nbsp;</span>
						<input type="text" class="form-control Input1" placeholder="请输入验证码" pattern="^\d{4}$" name="yzms" id="input02">
						<div class="huo">  <span class="a1" id="tijiao" onclick="huoqu()"> 获取验证码</span>  </div>
						
						<span class="error"></span>
					</div>
					</div>
				</div>
				<div class="bang">
					<div class="col-xs-12 aad"><a class="afhsy"   href="javascript:login()" >立即绑定</a></div>
					
				</div>
				</form>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../statics/js/jquery-1.12.4.js" ></script>
<script type="text/javascript">

	 var InterValObj; //timer变量，控制时间 
      var count; //间隔函数，1秒执行 
      var curCount=60; //当前剩余秒数 
	$(function(){
		
		
	});
	function login() {
		//获得 js 对象  
		var yzms = $("#input02").val();
		var hiddenno=$(".hiddenno").val();
		var phone=document.getElementById("input01");
		var sms=document.getElementById("input02");
		//判断是否为空，如果是空 的话 弹出 提示消息 昵称不能为空！
		if(phone.validity.valueMissing == true){
			phone.setCustomValidity("电话不能为空");
		}else if(phone.validity.patternMismatch == true){
			alert("请输入正确的11位电话号码");
		}
		else if(sms.validity.patternMismatch == true){
			alert("请输入正确的验证码！");
		}else{
			$.getJSON(
			"login_in2",
			{"yzms":yzms,
			"hiddenno":hiddenno
			},
			function(result){
				if("验证码错误！"==result){
					alert("验证码输入错误！");
					$("#input02").val("");
					$("#input02").attr("placeholder","重新输入验证");
				}else if("成功"==result){
					$("#form001").submit();
				}
			})
			
		}
		
	}
	function huoqu(){
		$(".error").html("");
		var yzms = $("#input01").val();
		$.getJSON(
			"login_sms",
			{"yzms":yzms},
			function(result){
				
				if(result=="发送验证码异常，请检查后重试"){
					alert("发送验证码异常，请检查后重试");
				}else{
					 $("#tijiao").attr("onclick","") //关闭按钮 
					 curCount=60;
					 InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次 
					 
					$(".hiddenno").val(result);
				}
				
			}
		
		);
	}
	
	function SetRemainTimes() {
		
            if(curCount == 0) {
               window.clearInterval(InterValObj); //停止计时器 
               $("#tijiao").attr("onclick","huoqu()") //启用按钮 
               $("#tijiao").html("重新发送"); 
            } else {
               curCount--;
               $("#tijiao").html("验证码 "+ curCount);
            }
         }
	
</script>

</html>